<template>
  <div class="sizepdf">
    <div class="sizepdf-a4" v-if="form" id="printMe">
      <div class="sizepdf-a4-title">十三余大货生产规格尺寸表</div>
      <div class="sizepdf-a4-detail">
        <div class="sizepdf-a4-detail-image">
          <el-image
            :src="form.wear_image[0]"
            fit="fill"
            :preview-src-list="form.wear_image"
          >
            <div slot="error" class="image-slot">
              <div>暂无图片</div>
            </div>
          </el-image>
        </div>
        <div class="sizepdf-a4-detail-data">
          <div class="sizepdf-a4-detail-data-one">
            {{ form.type_no || "暂无" }}
          </div>
          <div class="sizepdf-a4-detail-data-two">
            <div>品名：{{ form.type_name || "暂无" }}</div>
            <div>版师：{{ form.publisher || "暂无" }}</div>
            <div>
              尺寸表更新时间：{{
                (form.log_list.length && form.log_list[0].createtime) || "暂无"
              }}
            </div>
          </div>
          <div class="sizepdf-a4-detail-data-three">
            更新人：{{
              (form.log_list.length && form.log_list[0].username) || "暂无"
            }}
          </div>
        </div>
      </div>
      <div class="sizepdf-a4-table">
        <el-table
          :data="form.plank_house_table_data"
          v-if="form.plank_house_table_data"
          size="mini"
          border
          style="width: 100%"
          :header-cell-style="changeHeaderCellStyle"
          :cell-style="columnCellStyle"
        >
          <el-table-column prop="position_title" label="部位" align="center">
          </el-table-column>
          <el-table-column
            prop="position_method"
            label="测量方法"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="gear_difference" label="*档差" align="center">
          </el-table-column>
          <template
            v-for="(item, index) in form.plank_house_table_title.code_list"
          >
            <el-table-column
              :key="index"
              v-if="item.is"
              :label="item.size_code.title"
              align="center"
            >
              <el-table-column
                :prop="item.size_code.title"
                :key="index"
                :label="
                  item.height_code.title
                    ? item.height_code.title + '/' + item.waist_code.title
                    : ''
                "
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ row.code_list[item.size_code.title] }}
                </template>
              </el-table-column>
            </el-table-column>
          </template>

          <el-table-column
            prop="sample_code"
            :label="form.plank_house_table_title.sample_code"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="tolerance" label="公差±(cm)" align="center">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="tablelist" v-if="specifications_base_cdoe">
        <div
          v-for="(item, index) in form.plank_house_table_title.code_list"
          :key="index"
        >
          <div v-if="item.is">
            {{ item.size_code.title }}
          </div>
          <div>
            {{
              specifications_base_cdoe.base_size_code[index]
                .specifications_base_cdoe
            }}
          </div>
        </div>
      </div>
      <div class="sizepdf-a4-content">
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">测量图</div>
          <div class="sizepdf-a4-content-div-image">
            <el-image
              :preview-src-list="[item]"
              v-for="item in form.measure_image"
              :key="item"
              :src="item"
              fit="fill"
            >
              <div slot="error" class="image-slot">
                <div>暂无图片</div>
              </div>
            </el-image>
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">特别注意</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.be_careful || "暂无" }}
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">温馨提示</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.reminder || "暂无" }}
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">成衣风险</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.risk || "暂无" }}
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">样衣修改意见</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.sample_clothes_modification_comments || "暂无" }}
          </div>
        </div>
      </div>
    </div>
    <div class="sizepdf-button">
      <div>
        <el-button type="primary" v-print="'#printMe'" style="margin-top: 20px"
          >下载</el-button
        >
      </div>
      <!-- <div>
        <el-button
          type="primary"
          @click="onEdit"
          style="margin-top: 20px"
          >编辑</el-button
        >
      </div> -->
      <el-button
        type="danger"
        style="width: 70px; margin-top: 10px"
        v-if="size_code_status == 1"
        @click="onIs(type_no, 0)"
        >解锁</el-button
      >
      <el-button
        style="width: 70px; margin-top: 10px"
        type="primary"
        v-if="size_code_status == 0"
        @click="onIs(type_no, 1)"
        >锁定</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  postAdminOperateLook_new_products_plank_house,
  postAdminOperateSetlocking,
  postAdminOperateGetProductsSize,
} from "@/api";
export default {
  props: {
    type_no: "",
    size_code_status: "",
  },
  data() {
    return {
      form: "",
      is_base_title: "",
    };
  },
  mounted() {
    this.postAdminOperateLook_new_products_plank_house(this.type_no);
    this.postAdminOperateGetProductsSize(this.type_no);
  },
  methods: {
    // columnCellStyle(row,column, rowIndex) {
    //   if (row.column.label == this.is_base_title) {
    //     return { background: "#F5F7FA" };
    //   }
    // },
    async postAdminOperateGetProductsSize(type_no) {
      let obj = {
        type_no,
        page: 1,
        size: 1000,
      };
      let res = await postAdminOperateGetProductsSize(obj);
      let data = res.data[0];
      this.size_code_status = data.size_code_status;
    },
    async onIs(type_no, status) {
      let obj = {
        type_no: type_no,
        type: 1,
        status: status,
      };
      this.$confirm(`确定${status == 0 ? "解锁" : "锁定"}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await postAdminOperateSetlocking(obj);
            this.size_code_status = status;
          } catch (error) {}
        })
        .catch(() => {});
    },
    onEdit() {
      let { type_no } = this;
      this.$router.push({
        name: "ProcessMaintenanceSizeEdit",
        query: { type_no },
      });
    },
    changeHeaderCellStyle(row, rowIndex) {
      if (row.column.label == this.is_base_title) {
        return { color: "red" };
      }
    },
    async postAdminOperateLook_new_products_plank_house(type_no) {
      let obj = {
        type_no,
      };
      let res = await postAdminOperateLook_new_products_plank_house(obj);
      let data = res.data;
      data.specifications_base_cdoe = data.specifications_base_cdoe || "";
      data.wear_image = data.wear_image || [];
      data.measure_image = data.measure_image || [];
      this.product_base_code = data.products_base_cdoe || "";
      this.specifications_base_cdoe = data.specifications_base_cdoe || "";
      if (data.plank_house_table_title) {
        data.plank_house_table_title.code_list.forEach((e) => {
          if (!e.hasOwnProperty("is")) {
            e.is = true;
          }
        });
      }

      if (data.products_base_cdoe) {
        this.is_base_title =
          data.products_base_cdoe.base_code.height_code.title +
          "/" +
          data.products_base_cdoe.base_code.waist_code.title;
      }
      this.form = data;
      console.log(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.tablelist {
  display: flex;
  > div {
    width: 100%;
    border: 1px solid #ebeef5;
    margin-top: 10px;
    > div:nth-child(1) {
      text-align: center;
      color: #909399;
      font-weight: 800;
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;
      background: #f5f7fa;
      font-size: 12px;
    }
    > div:nth-child(2) {
      text-align: center;
      font-weight: 500;
      height:40px;
      line-height: 40px;
      border-bottom: 1px solid #ebeef5;
      font-size: 12px;
    }
  }
}
.sizepdf {
  display: flex;
  .sizepdf-button {
    width: 100%;
    // background: #efefef;
    border-left: 1px solid #efefef;
    padding-left: 100px;
    margin-left: 13px;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    > div {
      margin-top: 20px;
    }
  }
}
.sizepdf-a4 {
  background: #ffffff;
  width: 287mm;
  font-size: 14px;
  padding: 0 5mm 5mm;
  .sizepdf-a4-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding: 16px 0;
  }
  .sizepdf-a4-detail {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .sizepdf-a4-detail-image {
      > .el-image {
        width: 30mm;
      }
    }
    .sizepdf-a4-detail-data {
      margin-left: 5mm;
      .sizepdf-a4-detail-data-one {
        font-weight: 800;
        font-size: 16px;
      }
      .sizepdf-a4-detail-data-two {
        margin: 10px 0;
        width: 247mm;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .sizepdf-a4-table {
    > .el-table {
      border: 2px solid #ebeef5;
    }
    /deep/ .el-table .cell {
      font-size: 14px;
      font-weight: 600;
    }
  }
  .sizepdf-a4-content {
    margin-top: 20px;
    border: 1px solid #ebeef5;
    > div:not(:nth-child(1)) {
      border-top: 1px solid #ebeef5;
    }
    .sizepdf-a4-content-div {
      display: flex;
      .sizepdf-a4-content-div-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100mm;
        border-right: 1px solid #ebeef5;
      }
      .sizepdf-a4-content-div-image {
        display: flex;
        flex-wrap: wrap;
        padding: 5mm;
        width: 170mm;
        > .el-image {
          width: 54mm;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
      .sizepdf-a4-content-div-text {
        padding: 5mm;
        width: 170mm;
      }
    }
  }
}
</style>